<!-- <!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>登录网关</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				/* 渐变色网站： https://webgradients.com/*/
				background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
				/* 渐变换图片 */
			}

			.login {
				width: 400px;
				height: 250px;
				background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
				border-radius: 8px;
			}

			.login h1 {
				height: 38px;
				width: 93%;
				background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
				line-height: 38px;
				font-size: 30px;
				text-align: center;
				border-radius: 5px;
				margin: 15px auto;
			}

			.login-form {
				width: 60%;
				margin: 0 auto;
			}

			.login-form form input {
				width: 220px;
				height: 30px;
				outline: none;
				margin: 10px auto;
				border-radius: 5px;
			}

			.button {
				/* 按钮样式模板网站：http://tools.jb51.net/static/api/button_css/ */
				line-height: 30px;
				height: 30px;
				width: 70px;
				color: #ffffff;
				background-color: #4a8cf7;
				font-size: 16px;
				font-weight: normal;
				font-family: Arial;
				border: 0px solid #dcdcdc;
				-webkit-border-top-left-radius: 3px;
				-moz-border-radius-topleft: 3px;
				border-top-left-radius: 3px;
				-webkit-border-top-right-radius: 3px;
				-moz-border-radius-topright: 3px;
				border-top-right-radius: 3px;
				-webkit-border-bottom-left-radius: 3px;
				-moz-border-radius-bottomleft: 3px;
				border-bottom-left-radius: 3px;
				-webkit-border-bottom-right-radius: 3px;
				-moz-border-radius-bottomright: 3px;
				border-bottom-right-radius: 3px;
				-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
				-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
				box-shadow: inset 0px 0px 0px 0px #ffffff;
				text-align: center;
				display: inline-block;
				text-decoration: none;
			}

			.button:hover {
				background-color: #446bf7;
			}

			.footer {
				position: fixed;
				bottom: 0;
				height: 50px;
				font-size: 12px;
				text-align: center;
				font-family: "宋体";
			}
		</style>
	</head>
	
	<body>
		<div class="login">
			<h1>智能车机登录系统</h1>
			<div class="login-form">
				<form method="post" action="/72.html">  
					<input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />  
					<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />  
					<input type="submit" class="button" value="登    录" />  
				</form>
			</div>

		</div>
		<div class="footer">
			2024 边缘网关智能车机系统<br>
			<a href="http://www.farsight.com.cn" target="_blank"></a>
		</div>
	</body>
</html> -->
<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>登录网关</title>  
    <style type="text/css">  
        * {  
            padding: 0;  
            margin: 0;  
            box-sizing: border-box;  
        }  

        html, body {  
            height: 100%;  
            font-family: Arial, sans-serif;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            background: url('https://www.lionaitech.com/upload/2020/0513/1589333036.jpg') no-repeat center center fixed; /* 车内背景图 */  
            background-size: cover;  
        }  

        .login {  
            width: 400px;  
            height: 300px;  
            background: rgba(0, 0, 0, 0.7); /* 添加透明效果 */  
            border-radius: 10px;  
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);  
            backdrop-filter: blur(10px); /* 背景模糊效果 */  
        }  

        .login h1 {  
            height: 50px;  
            line-height: 50px;  
            font-size: 26px;  
            text-align: center;  
            color: #ffffff;  
            margin-bottom: 20px;  
            border-bottom: 2px solid #fff;  
            font-weight: bold;  
        }  

        .login-form {  
            width: 80%;  
            margin: 0 auto;  
        }  

        .login-form input {  
            width: 100%;  
            height: 40px;  
            outline: none;  
            margin: 10px 0;  
            border-radius: 5px;  
            border: 1px solid #fff;  
            padding: 0 10px;  
            font-size: 16px;  
            color: #333;  
        }  

        .button {  
            height: 40px;  
            width: 100%;  
            color: #ffffff;  
            background-color: #4a8cf7;  
            font-size: 16px;  
            font-weight: bold;  
            border: none;  
            border-radius: 5px;  
            cursor: pointer;  
            transition: background-color 0.3s ease;  
        }  

        .button:hover {  
            background-color: #446bf7;  
        }  

        .footer {  
            position: fixed;  
            bottom: 0;  
            height: 50px;  
            font-size: 12px;  
            text-align: center;  
            color: #ffffff;  
            opacity: 0.8;  
        }  
    </style>  
</head>  

<body>  
    <div class="login">  
        <h1>智能车机登录系统</h1>  
        <div class="login-form">  
            <form method="post" action="/72.html">  
                <input type="text" name="username" id="usr" placeholder="请输入用户名" required />  
                <input type="password" name="password" id="pwd" placeholder="请输入密码" required />  
                <input type="submit" class="button" value="登    录" />  
            </form>  
        </div>  
    </div>  
    <div class="footer">  
        2024 边缘网关智能车机系统<br>  
        <a href="http://www.farsight.com.cn" target="_blank"></a>  
    </div>  
</body>  
</html>